<style scoped>
 .pro-detail-content{
        padding-left: 20px;
        padding-right: 20px;
        margin-bottom: 50px;
    }
    .pro-detail-content .guanli{
        width:20%;
        padding:0;
        border-radius: 0 2px 2px 0;

    }
    .pro-detail-content .btn1{
        display: inline-block;
        height:20px;
        padding: 0 5px;
        margin: 0 5px;
        line-height: 18px;
        border-radius: 3px;
        border:1px solid #C4C4C4;
    }
    
    #submit{
        border-radius:20px;
        width:200px;
    }
    #back{
        border-radius:20px;
        margin-left: 20px;
        width: 120px;
    }
    .pro-detail-content .tagBox{
        border:1px solid #D6D6D6;
        height:36px;
        line-height:36px;
        background-color:#F0F0F0;
        border-radius: 0 2px 2px 0;
    }
    .pro-detail-content .bgk{
        background-color:#EDF2F6 ;
        padding-top: 20px;
        margin-bottom: 20px;
        padding-left: 20px;

    }

    .pro-detail-content .special{
        padding:20px 20px;
        margin-bottom:15px;
    }
    .pro-detail-content .special .ivu-form-item{
        margin-bottom: 15px;
    }
    .pro-detail-content  .special .buttonBox{
        width:100%;
        padding-right:15px;
        margin-bottom:15px;
    }
    .pro-detail-content .special .buttonBox .button{
        border-radius:0;
        width:100%;
    }

    .pro-detail-content .main .ivu-select,.main .ivu-input{
        border-radius: 0 2px 2px 0;
    }
    .common-box-body{
        padding-top: 24px;
    }
    .searchH3{
        border-bottom:1px solid #B3CAD7;
    }
 .amap-demo {
    height: 500px !important;
    margin-bottom:15px;
}
.ding.ivu-btn{
        border-radius: 0px !important;
        border:1px solid #bebebe;
        border-left:0;
    }
</style>
<style>
.teshu .ivu-form-item-label{
        margin-top: 1px ;
    }
    
    .parter_box .ivu-input-group-append{
        border-radius:0px 2px 2px 0 !important;
        background-color:#FAFAFA;
        border-color:#BEBEBE;
    }
</style>

<template>
<div class="pro-detail">
        <product-title></product-title>
        <div class="pro-detail-content ">
             <Form  label-position="right"  id="main" ref="formItem" :model="formItem" :rules="ruleFormitem">
                 <div class="common-box-header">
                     <h3>产品基本信息</h3>
                 </div>
                 <div class="common-box-body">
                     <Row>
                         <Col :md="24" :lg="12" >
                            <FormItem label="机构名" prop="name">
                                <Input v-model="formItem.name" placeholder="请输入机构名"></Input>
                            </FormItem>
                         </Col>
                         <Col :md="24" :lg="6">
                            <FormItem label="联系人" prop="link_name">
                                <Input v-model="formItem.link_name" placeholder="请输入联系人"></Input>
                            </FormItem>
                         </Col>
                         <Col :md="24" :lg="6">
                            <FormItem label="联系电话" prop="tel">
                                <Input v-model="formItem.tel" placeholder="请输入联系电话"></Input>
                            </FormItem>
                         </Col>
                         <Col :md="24" :lg="12">
                            <FormItem label="地址" prop="address" class="teshu">
                                <Input v-model="formItem.address" placeholder="请输入地址">
                                    <Button slot="append" @click="addressChange" class="ding">在地图中定位</Button>
                                </Input>
                            </FormItem>
                         </Col>
                         <Col :md="24" :lg="12">
                            <FormItem label="经纬度" prop="lat">
                                <Input v-model="lat_lng" placeholder="请输入地址"></Input>
                            </FormItem>
                         </Col>
                     </Row>
                     <Row>
                         <i-col span="18">
                             <FormItem >
                                <el-amap vid="amapDemo" class="amap-demo" :plugin="plugins" :center="mapCenter" style="padding:10px;border: 1px solid #EDEDED">
                                    </el-amap>
                            </FormItem>
                         </i-col>
                         
                     </Row>
                 </div>
            </Form>
            <div id="footer" class="pt22">
            <Button v-if="$isShow('compensate_link/update')" type="primary" shape="circle" id="submit" @click="handleSubmit('formItem')" style="border-radius: 30px !important;">
                <Icon type="checkmark-circled"></Icon>
                保存 / 提交
            </Button>  
            <Button id="back" shape="circle" @click="back" style="border-radius: 30px !important;">返回</Button>
            </div>
        </div>
  </div>
</template>
<script>
    import productTitle from '../../components/productTitle';
    import {update_link,detail_link} from '../../api/compensate_link'
    import { lazyAMapApiLoaderInstance  } from 'vue-amap';
    export default {
        data(){
            return{
                formItem:{
                    name:'',
                    tel:'',
                    address:'',
                    link_name:'',
                    lng:'',
                    status:'1',
                    lat:'',
                    id:''
                },
                map:{},
                _Marker:{},
                plugins: ['Geolocation','PlaceSearch'],
                mapCenter:[113.63305, 34.767174],
                ruleFormitem:{
                    name:[
                        {
                            required:true,
                            message:'机构名不能为空',
                            trigger:'blur'
                            
                        }
                    ],
                    tel:[
                        {
                            required:true,
                            message:'电话不能为空',
                            trigger:'blur'
                            
                        }
                    ],
                    link_name:[
                        {
                            required:true,
                            message:'联系人不能为空',
                            trigger:'blur'
                            
                        }
                    ],
                    address:[
                        {
                            required:true,
                            message:'地址不能为空',
                            trigger:'blur'
                            
                        }
                    ],
                    lat:[
                        {
                            required:true,
                            message:'经纬度不能为空',
                        }
                    ],
                },

            }
        },
        components:{
            productTitle
        },
        created(){
            this.get_detail();
        },
        computed:{
            lat_lng:function () {
                if(!this.formItem.lat||!this.formItem.lng){
                    return '';
                }else{
                    return this.formItem.lat+','+this.formItem.lng;
                }
            }
        },
        mounted(){
            lazyAMapApiLoaderInstance.load().then(() => {
                this.map = new AMap.Map('amapDemo', {
                    center:this.mapCenter,
                    zoom:15
                });
                this._Marker = new AMap.Marker({
                    map:null,
                })
                var _self = this
                this.map.on("click",function(event){
                    _self.formItem.lng = event.lnglat.lng;
                    _self.formItem.lat = event.lnglat.lat;
                    
                })
                AMap.event.addListener(this._Marker,'dragend',function(){
    //                alert(this._Marker.getPosition( ))
    //                alert(getPosition( ))
                })
//
            });
        },
        methods:{
            addressChange() {
                var _address =  this.formItem.address;
                this.onSearchResult(_address);
            },
            onSearchResult(address) {
                var map = this.map
                var local = new AMap.PlaceSearch({
                    map: map
                });
                local.search(address,function(status,result){
                });
                var _self = this;
                local.on("markerClick",function(event){
                    _self.formItem.lng = event.data.location.lng;
                    _self.formItem.lat = event.data.location.lat;
                })
            },
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.submit();
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
            get_detail(){
                let params={
                    id:this.$route.params.id
                }
                new Promise((resolve, reject) => {
                    detail_link(params).then(res => {
                        if (res.data.err == 0) {
                            // this.id = res.data.data.id;
                            this.formItem = res.data.data;
                            this.mapCenter[1] = res.data.data.lat;
                            this.mapCenter[0] = res.data.data.lng;
                            this.map.setCenter(this.mapCenter);
                            this._Marker.setPosition(this.mapCenter);
                            this._Marker.setMap(this.map);
                        } else {
                            this.$Message.error(res.data.info);
                        }
                    }).catch(error => {
                        reject(error)
                    })
                })
            },
            submit(){
                new Promise((resolve, reject) => {
                    update_link(this.formItem).then(res => {
                        if (res.data.err == 0) {
                            this.$router.push({name:'link_compen'})
                        } else {
                            this.$Message.error(res.data.info);
                        }
                    }).catch(error => {
                        reject(error)
                    })
                })
            },
            back(){
                 this.$router.push({name:'link_compen'});
            }
        }
    }
</script>

